<!DOCTYPE html>
<html>
<head>
	<title>Link Types</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<link rel="icon" type="image/png" href="../iui/iui-favicon.png">
	<link rel="apple-touch-icon" href="../iui/iui-logo-touch-icon.png" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	
	<link rel="stylesheet" href="../iui/iui.css" type="text/css" />
	<link rel="stylesheet" title="Default" href="../iui/t/default/default-theme.css"  type="text/css"/>
	<script type="application/x-javascript" src="../iui/iui.js"></script>
</head>

<body>

    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
        <a class="button" href="#dialogPanel">Dialog</a>
    </div>


    <ul id="main" title="Complete" selected="true">
      <li><a href="#simple">Simple screen</a></li>
      <li><a href="#buttons">Buttons</a></li>
      <li><a href="#links">Links</a></li>
      <li><a href="#nobackbutton">No back button</a></li>
      <li><a href="#panel">Panel</a></li>
      <li class="group">Group list item</li>
      <li><a href="#form-elements">Form elements</a></li>
      <li>Just a text</li>
    </ul>


    <div id="simple" title="Simple">
		Lorem Ipsum
    </div>



    <div id="panel" title="Panel" class="panel">
      <h2>Panel (read/only)</h2>
      <fieldset>
        <div class="row">
            <label>Label</label>
            <span>Text in a span</span>
        </div>
        <div class="row">
            <label>Label 2</label>
            <span>Long and multiple lines text in a span.</span>
        </div>
      </fieldset>

      <h2>Panel list</h2>
      <ul>
      	<li class="group">Group list item</li>
      	<li>List item 1</li>
      	<li>List item 2</li>
      	<li>List item 3</li>
      	<li class="group">Group list item 2</li>
      	<li>List item 4</li>
      </ul>

      <h2>Panel links list</h2>
      <ul>
      	<li class="group">Group list item</li>
      	<li><a href="#buttons">Buttons</a></li>
      	<li><a href="#nobackbutton">No back button</a></li>
      	<li><a href="#links">Link Types</a></li>
	    <li><a href="#form-elements">Form elements</a></li>
      </ul>

    </div>



    <div id="buttons" title="Buttons" class="panel">
      <h2>Big Buttons</h2>
      <a class="whiteButton" type="button" href="javascript:alert('White')">White Button</a>
      <a class="grayButton" type="button" href="javascript:alert('Gray')">Gray Button</a>
      <a class="redButton" type="button" href="javascript:alert('Red')">Red Button</a>

    </div>



    <ul id="links" title="Link Types">
      <li><a href="#panel">Internal Link (#id)</a></li>
      <li><a href="fragPanel.frag">Ajax Link (Fragment)</a></li>
      <li><a target="_self" href="../samples/music/music.html">Ext Link (_self)</a></li>
      <li><a target="_self" href="../samples/music/music.html#_artists">Ext Link w/Anchor</a></li>
      <li><a target="_webapp" href="../test/webappBack.html">Ext Link (_webapp)</a></li>
      <li><a target="_replace" href="replacingFrag1.frag">Load 2 more (_replace)</a></li>
    </ul>



    <div id="nobackbutton" title="No Back Button" class="panel" hideBackButton="true">
    	<h2>No back button</h2>
    	<a href="javascript:history.go(-1)" class="whiteButton">Go back</a>
    </div>




    <form id="form-elements" title="Form Elements" class="panel" name="formName" method="GET" action="fragPanel.frag">
      <h2>Main inputs</h2>
      <fieldset>
        <div class="row">
            <label>Text</label>
            <input type="text" name="text" value="" placeholder="Your text">
        </div>
        <div class="row">
            <label>Password</label>
            <input type="password" name="password" value="" placeholder="Your password">
        </div>
        <div class="row">
            <label>Email</label>
            <input type="email" name="email" value="" placeholder="Your email address">
        </div>
        <div class="row">
            <label>Tel.</label>
            <input type="tel" name="tel" value="" placeholder="Your phone number">
        </div>
        <div class="row">
            <label>URL</label>
            <input type="url" name="url" value="" placeholder="ex: http://www.google.com">
        </div>
        <div class="row">
            <label>Textarea</label>
            <textarea name="textarea"></textarea>
        </div>
        <div class="row">
            <label>Select</label>
            <select name="select" size="1">
            	<option value="item1">Item 1</option>
            	<option value="item2">Item 2</option>
            	<option value="item3">Item 3</option>
            	<option value="item4">Item 4</option>
            	<option value="item5">Item 5</option>
            	<option value="item6">Item 6</option>
            	<option value="item7">Item 7</option>
            	<option value="item8">Item 8</option>
            	<option value="item9">Item 9</option>
            </select>
        </div>
        <div class="row">
            <label>Radio</label>
            <input type="radio" name="radio" value="on"> <input type="radio" name="radio" value="off">
        </div>
        <div class="row">
            <label>Checkbox</label>
            <input type="checkbox" name="checkbox" value="on">
        </div>
        <div class="row">
            <label>Toggle</label>
            <div class="toggle" onclick="">
            	<span class="thumb"></span>
            	<span class="toggleOn">ON</span>
            	<span class="toggleOff">OFF</span>
            </div>
        </div>
        <div class="row">
            <label>Active</label>
            <div class="toggle" onclick="" toggled="true">
            	<span class="thumb"></span>
            	<span class="toggleOn">ON</span>
            	<span class="toggleOff">OFF</span>
            </div>
        </div>

      </fieldset>

      <h2>Date & number</h2>
      <fieldset>
        <div class="row">
            <label>Time</label>
            <input type="time" name="time" value="" placeholder="A time">
        </div>
        <div class="row">
            <label>Month</label>
            <input type="month" name="month" value="2012-01">
        </div>
        <div class="row">
            <label>Date</label>
            <input type="date" name="date" value="2012-01-01">
        </div>
        <div class="row">
            <label>Datetime</label>
            <input type="datetime" name="datetime" value="2012-01-01 01:00:00">
        </div>
        <div class="row">
            <label>Num.</label>
            <input type="text" pattern="[0-9]*" name="int" value="" placeholder="A number from 0 to 9">
        </div>
        <div class="row">
            <label>Range</label><input type="text" name="volumeoutput" value="100">
			<input type="range" name="volume" value="100" onchange="volumeoutput.value=parseInt(volume.value)" />
        </div>
        <div class="row">
            <label>Range (10)</label><input type="text" name="volumestepoutput" value="100">
			<input type="range" name="volumestep" value="100" step="10" onchange="volumestepoutput.value=parseInt(volumestep.value)" />
        </div>
      </fieldset>

      <input type="submit" class="whiteButton" value="Submit form">

    </form>


    <form id="dialogPanel" title="Dialog Panel" class="dialog" action="fragPanel.frag" method="GET">
        <fieldset>
            <h1>Music Search</h1>
            <a class="button leftButton" type="cancel">Cancel</a>
            <a class="button blueButton" type="submit">Search</a>
            
            <label>Artist:</label>
            <input id="artist" type="text" name="artist"/>
            <label>Song:</label>
            <input type="text" name="song"/>
        </fieldset>
    </form>


</body>

</html>